<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <meta charset="UTF-8">
    <#assign base=request.contextPath  />
    <base id="basePath" href="${base}">
    <script src="${base}/js/jquery.min.js"></script>
    <script src="${base}/js/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="${base}/js/layui/css/layui.css"  media="all">
    <title>Title</title>
</head>
<style>
    #files{
        width: 500px;
        margin: 10px;
        border-radius: 1px solid #9F9F9F;

    }
    #files button{
        float: right;
        margin-left: 10px;
    }
    a{
        color:#9F9F9F;
        text-decoration: none;
        font-size: 19px;
    }
</style>

<body style="margin-left: 10px">
<input id="id" type="hidden" value="${RelactionId}">
 <p style="font-size: 24px;margin: 3px">当前拥有的文件列表： </p></br>
<div id="files">

</div>

</br>
    <input type="file" id="file" onchange="uploadFileFun()">
<div style="display: none">
    <!--用于存放旧文件的ID  更新文件的时候 需要删除旧文件 -->
    <input type="hidden" id="oldFileId">
    <input type="file" id="newFile" onchange="updateFile()">
</div>




<script>
    findFile();
    function findFile(){
        $("#files").html("")
        $.ajax({
            async: false,
            type: "post",
            data:{RelactionId:$("#id").val()},
            url: "${base}/motherNursing/findFile",
            success: function (data) {
                 for (var i=0;i<data.length;i++){
                     //循环文件名字和删除编辑按钮
                     $("#files").append(
                             '<a href="${base}/motherNursing/dowLoad?fileId='+data[i].id+'">'+data[i].fileName+'</a><button class="layui-btn layui-btn-danger layui-btn-xs" onclick="removeFile('+"'"+data[i].id+"'"+')">删除</button>	<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="toUpdate('+"'"+data[i].id+"'"+')">更新</button></br>'
                     )
                 }
            }
        });
    }
    function uploadFileFun() {
        var photo = document.getElementById("file").value;
        if ("" == photo) {
            alert("请选择上传文件");
            return false;
        }
           if ($("#file")[0].files[0].size>1024000) {
            alert("文件过大，请重新上传");
            return false;
        }

        else {
            upload($("#file"),$("#id").val())
        }
    }


//上传 flag用于判断是否是更新文件
    function upload(file,id,flag){
        //把文件序列化成 form表单元素
        var MuliutPartFile = new FormData();
        MuliutPartFile.append("file",  file[0].files[0]);
        MuliutPartFile.append("RelactionId",  id);
        $.ajax({
            async: false,
            cache: false,
            type: "post",
            data: MuliutPartFile,
            url: "${base}/motherNursing/uploadFile",
            contentType: false, //必须
            processData: false, //必须
            success: function (data) {
             if(flag!=1){
                 alert(data)
                 findFile();
             }

            }
        });
    }
    //删除文件   flag用于判断是否是更新文件 是更新文件的时候  不允许弹框
    function removeFile(fileid,flag){
        $.ajax({
            async: false,
            type: "post",
            data:{fileId:fileid},
            url: "${base}/motherNursing/deleteFile",
            success: function (data) {
                if(flag!=1){
                    if(data===true){
                        alert("删除成功")
                    }else{
                        alert("删除失败")
                    }

                    findFile();
                }
                findFile();
            }
        });
    }
    //选择新的文件
    function toUpdate(fileid){
        alert("请选择新的文件");
        $("#newFile").click();
        $("#oldFileId").val(fileid)

    }

    //开始更新文件
    function updateFile(){
        var oldFileId=$("#oldFileId").val();
        $("#oldFileId").val("");

        //上传新的文件
        upload($("#newFile"),$("#id").val(),1);
        //删除旧的文件
        removeFile(oldFileId,1);

        $.ajax({
            async: false,
            type: "post",
            data:{oldFileId:oldFileId},
            url: "${base}/motherNursing/updateFile",
            success: function (data) {
                if(data===true){
                    alert("更新成功")
                }else{
                    alert("更新失败")
                }
                findFile();
            }
        });
    }
</script>
</body>
</html>